<template>
  <el-drawer
      size="700px"
      v-model="drawer"
      :with-header="false"
      @closed="saveConfig"
  >
    <el-tabs class="tabs" v-model="showTab">
      <el-tab-pane name="base" label="发起人设置" class="pane">
        <div class="title">
          <b>节点名称</b>
        </div>
        <el-input v-model="name" placeholder="输入节点的名称..." clearable />
        <br/>
        <div class="title top30">
          <b>可提交申请的成员</b>
          <span>既设置那些人可以使用当前流程</span>
        </div>
        <br/>
        <el-button icon="Plus" @click="this.$.refs.useUser.show()">选择人员</el-button>
        <el-tag
            v-for="tag in useUserResult"
            :key="tag.name"
            class="mx-1"
            closable
            @close="handleCloseUseUser(tag)"
        >{{ tag.name }}</el-tag>

        <div class="title top30">
          <b>流程发起人设置</b>
          <span>当前流程发起时，发起节点的办理人自动填充为谁</span>
        </div>
        <el-radio-group v-model="hissBusinessStarterUserType">
          <el-radio label="currentLoginUser">当前登录人</el-radio>
          <el-radio label="fixedUser">固定发起人</el-radio>
        </el-radio-group><br/>
        <el-button v-if="hissBusinessStarterUserType=='fixedUser'" icon="Plus"  @click="this.$.refs.fixedUser.show()">选择人员</el-button>
        <el-tag
            v-for="tag in fixedUserResult"
            :key="tag.name"
            class="mx-1"
            closable
            @close="handleCloseFixedUser(tag)"
        >{{ tag.name }}</el-tag>
        <el-divider />
        <div class="title title-line">
          <b>设置可用的办理按钮</b>
          <span>如果不显示,前端永远不显示该按钮</span>
        </div>
        <ButtonConfig ref="bConfig" attr="starter" :config="config" :id="id"/>
      </el-tab-pane>
      <el-tab-pane name="form" label="表单权限">
        <FormConfig ref="fConfig" :tenant="tenant" :can-add="true" :config="config"/>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
  <SelectUserDialog ref="fixedUser" :tenant="tenant" :max="1" :ok="fixedUserOk" :init-data="fixedUserResult"></SelectUserDialog>
  <SelectUserDialog ref="useUser" :tenant="tenant" :max="0" :ok="useUserOk" :init-data="useUserResult"></SelectUserDialog>
</template>

<script>
import SelectUserDialog from './SelectUserDialog'
import FormConfig from './FormConfig'
import {updateElementName} from '@/utils/UpdateElementUtil'
import ButtonConfig from "@/views/components/ButtonConfig";

export default {
  name: "StarterConfig",
  components:{SelectUserDialog,FormConfig,ButtonConfig},
  props:{
    tenant:{
      type:String,
      default:''
    },
    ok:{
      type:Function,
      default:null
    },
    config:{
      type: Object,
      default: {}
    },
    id:{
      type: String,
      default: ''
    }
  },
  data() {
    return {
      name:'',
      showTab:'base',
      drawer:false,
      fixedUserResult:[],
      useUserResult:[{id:'',name:'所有人'}],
      hissBusinessStarterUserType:'currentLoginUser'
    }
  },
  watch:{
    id:function (newVal,oldVal){
      if(newVal){
        if(this.drawer){
          this.initPanel()
        }
      }
    }
  },
  methods: {
    saveConfig(){
      if(!this.id||this.id==''){
        return
      }
      let nodeConfig = this.config.nodeConfig[this.id]||{};
      nodeConfig.fixedUser=this.fixedUserResult
      nodeConfig.useUser=this.useUserResult
      nodeConfig.hissBusinessStarterUserType=this.hissBusinessStarterUserType
      updateElementName(this.bpmnModeler,this.element,this.businessObject,this.name)
      this.config.nodeConfig[this.id]=nodeConfig
      this.$refs.fConfig.saveForm()
      let canvas = this.bpmnModeler.get("canvas");
      if(canvas){
        canvas.resized()
      }
    },
    // 显示并初始化值
    show(bpmnModeler,businessObject,element){
      this.businessObject = businessObject;
      this.bpmnModeler = bpmnModeler;
      this.element = element;
      this.drawer = true
    },
    // 开始初始化面板
    initPanel(){
      let nodeConfig = this.config.nodeConfig[this.id]||{};
      this.fixedUserResult=nodeConfig.fixedUser||[]
      this.useUserResult=nodeConfig.useUser||[{id:'',name:'所有人'}]
      if(this.useUserResult.length==0){
        this.useUserResult.push({id:'',name:'所有人'})
      }
      this.hissBusinessStarterUserType=nodeConfig.hissBusinessStarterUserType||'currentLoginUser'
      this.name = this.businessObject.get('name')
      if(this.drawer){
        this.$nextTick(()=>{
          this.$refs.fConfig.initForm(this.id)
        })
      }
    },
    fixedUserOk(result){
      this.fixedUserResult=result
    },
    useUserOk(result){
      this.useUserResult=result
    },
    handleCloseFixedUser(tag){
      for (let i = 0; i < this.fixedUserResult.length; i++) {
        let temp = this.fixedUserResult[i]
        if(temp.id==tag.id){
          this.fixedUserResult.splice(i,1)
          break
        }
      }
    },
    handleCloseUseUser(tag){
      for (let i = 0; i < this.useUserResult.length; i++) {
        let temp = this.useUserResult[i]
        if(temp.id==tag.id){
          this.useUserResult.splice(i,1)
          break
        }
      }
      if(this.useUserResult.length==0){
        this.useUserResult = [{id:'',name:'所有人'}]
      }
    }
  }
}
</script>

<style scoped>
.top30 {
  margin-top: 30px;
}
.tabs {
  --el-font-size-base:16px;
}
.pane{
  text-align: left;
  --el-font-size-base:12px;
}
.title{
  width: 100%;
}
.title b{
  font-size:14px;
  font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
  font-weight:700;
  color: #000;
  display: block;
  margin: 8px 0px;
}
.title span{
  font-size:13px;
  font-family:'微软雅黑', sans-serif;
  font-weight:400;
  color:#999999;
  display: block;
}
</style>
